<template>

<!-- vue 是用户构建界面的渐进式框架，只需关注视图层 ，现在化的工具链以及各种支持类库 -->
<div>{{message}}
    <p>{{counter}}</p>
<TodoItem></TodoItem>
    <p>创建时间: ------{{apple}}</p> 
<!-- v-bind attribute 被称为指令,指令带有前缀v-,以表示他们是vue提供的特殊attribute,他们会在渲染的DOM上应用特殊的响应式行为,该指令的意思是将:
"这个元素的节点的title attribute 和当前活跃实例的message property 保持一致" -->
    <span 
    id="bind-attribute" v-bind:title="message">1</span>
    <p>message</p>
    <!-- v-on 事件监听器 -->
    <button v-on:click="reverseMessage">翻转</button>
    <!-- v-model 轻松实现表单输入和应用状态之间的双向绑定 -->
    <p>------------------------</p>
    <p>{{message}}</p>
    <input type="text" v-model="message">

    <p>-----------v-for 是一个应用--------------</p>
    <ol>    
        <li v-for="todo in todoes">
            {{todo.text}}
        </li>
    </ol>
    <p>-------------组件化 ------------</p>
    <div>
        组件系统是vue的另一个重要概念,因为它是一种抽象,允许我们使用小型,独立和通常可复用的组件构建大型应用,几乎任意类型的应用界面都可以抽象为一个组件树
        <hr>
        在Vue中,组件本质上是一个具有预定义选项的实例,在Vue 中注册组件很简单,如对app 对象所做的那样创建一个组件对象,并将其定义在父级组件的components 选项

    </div>
    

</div>


</template>
<script>

export default {
    
    components:{
        TodoItem
    },
    data(){
        return {
            message:'Hello Vue',
            counter:1000,
            todoes:[
                {text:'learn'},
                {text:'learn Vue'},
                {text:'learn V'},

                ],
            apple:'Your loaded this page on '+ new Date().toLocaleDateString(),
            
        }
    },
    mounted(){
        setInterval(()=>{
            this.counter--
        },1000)
    },
    methods:{
        reverseMessage(){
            this.message= this.message.split('').reverse().join('')
        }
    }
}
</script>